<template>
    <div class="mt-20 pd-30">
        <el-form :model="form" :rules="rules" ref="ruleForm">
            <div class="mobile-input">
                <el-form-item prop="mobile">
                    <el-input placeholder="请输入手机号" v-model="form.mobile">
                        <div slot="prefix">
                            <el-dropdown @command="chooseCountryCode">
                                <el-button type="primary">
                                    {{ country_code[current_code].name }}
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="index" :key="index" v-for="(item, index) in country_code">{{
                                        item.name }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-input>
                </el-form-item>
            </div>
            <div class="mt-30">
                <el-form-item prop="password">
                    <el-input :type="password_visible ? 'text' : 'password'" placeholder="请输入密码" v-model="form.password">
                        <i :class="password_visible ? 'icon-yanjing-zhengyan' : 'icon-biyan'" @click="password_visible=!password_visible" class="iconfont pr-10 cursor-pointer" slot="suffix"></i>
                    </el-input>
                </el-form-item>
            </div>
        </el-form>

        <div class="flex align-center jus-between">
            <div class="pl-10">
                <el-checkbox v-model="remember_password"></el-checkbox>
                <span class="pl-6 cursor-pointer">记住密码</span>
            </div>
            <div>
                <span @click="forgetPassword" class="cursor-pointer">忘记密码</span>
            </div>
        </div>

        <div class="calc-margin">
            <div class="flex align-center pl-10">
                <el-checkbox v-model="agreement"></el-checkbox>
                <div class="ml-4">
                    <span>我已阅读并同意</span>
                    <span @click="popAgretment('用户协议','user_deal')" class="cursor-pointer color-pink pl-4 pr-4">用户协议</span>
                    <span>与</span>
                    <span @click="popAgretment('隐私政策','secret_deal')" class="cursor-pointer color-pink pl-4 pr-4">隐私政策</span>
                </div>
            </div>
            <div class="mt-10">
                <el-button :loading="loading" @click="toLogin" class="login-button" round>立即登录</el-button>
            </div>
        </div>

        <el-dialog :visible.sync="agreement_visible" center width="40%" top="10vh" :modal="false">
            <div class="text-center mt-30 font-18 color-333">
                {{agreement_title}}
            </div>
            <div class="mt-10 pd-20 agreement-content">
                <div v-html="agreement_content"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getStorage, setStorage } from '@/utils/storage'
export default {
    data() {
        return {
            remember_password: false,
            form: {
                country_code: 86,
            },
            agreement: false,
            ruleForm: {
                mobile: '',
                password: '',
            },
            rules: {
                mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
            },
            current_code: 0,
            password_visible: false,
            loading: false,
            agreement_visible: false,
            agreement_content: '',
            agreement_title: '',
        }
    },
    props: {
        deal: {
            Type: Object,
            default() {
                return {
                    user_deal: '',
                    secret_deal: '',
                }
            },
        },
        country_code:{
            type:[Array,Object],
            default:[]
        }
    },
    mounted() {
        let cache_account = getStorage('login-account')
       
        if (cache_account) {
            this.form = JSON.parse(cache_account)
        }
    },
    methods: {
        popAgretment(title, index) {
            this.agreement_title = title
            this.agreement_content = this.deal[index]
            this.$nextTick(() => {
                this.agreement_visible = true
            })
        },
        chooseCountryCode(value) {
            this.current_code = value
        },
        forgetPassword() {
            this.$emit('forgetPassword')
        },
        toLogin() {
            if (!this.agreement) {
                this.$message.error('请先阅读并同意《用户协议》与《隐私政策》')
                return false
            }
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    let param = {
                        country_code: this.country_code[this.current_code].code,
                        mobile: this.form.mobile,
                        password: this.form.password,
                    }
                    this.$store
                        .dispatch('user/login', param)
                        .then((res) => {
                            if (this.remember_password) {
                                setStorage('login-account', JSON.stringify(param), 10 * 24 * 60 * 60)
                            }
                            this.$store.state.system.login_visible = false
                        })
                        .catch((error) => {})
                        .finally((res) => {
                            this.loading = false
                        })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.agreement-content{
    max-height: 60vh;
    overflow-y: scroll;
}
</style>
